<template>
	<view>
		<view class="button-sp-area">
			<button class="mini-btn" style="margin: 20px;" type="primary" size="mini" @click="godd()">我的工单</button>
		</view>
		<view class="uni-padding-wrap">
			<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="80px">
				<uni-forms-item label="姓名" required name="xm">
					<uni-easyinput v-model="valiFormData.xm" />
					<text class="xzt">隐私信息严格保密</text>
					<!-- <uni-title class="h5" type="h5" color="#666" title="隐私信息严格保密"></uni-title> -->
				</uni-forms-item>
				<uni-forms-item label="电话" required name="bxdh">
					<uni-easyinput v-model="valiFormData.bxdh" />
					<text class="xzt">隐私信息严格保密</text>
				</uni-forms-item>
				<uni-forms-item label="被举报人" required name="bjbr">
					<uni-easyinput v-model="valiFormData.bjbr" />
				</uni-forms-item>
				<uni-forms-item label="被举报部门" required name="bjbbm">
					<uni-easyinput v-model="valiFormData.bjbbm" />
				</uni-forms-item>
				<uni-forms-item label="举报类别" required name="hobby">
					<uni-data-checkbox v-model="valiFormData.hobby" multiple :localdata="hobbys" />
				</uni-forms-item>
				<uni-forms-item label="描述" required name="bxms">
					<uni-easyinput type="textarea" v-model="valiFormData.bxms" />
				</uni-forms-item>
				<uni-forms-item required name="datetimesingle" label="问题发生时间时间">
					<uni-datetime-picker type="datetime" v-model="valiFormData.fssj" />
				</uni-forms-item>
				<uni-section title="图片上传" type="line">
					<uni-file-picker ref="files" :auto-upload="false" :sizeType="sizeType" v-model="imageValue"
						file-mediatype="image" :image-styles="imageStyles" mode="grid" file-extname="png,jpg,webp,bmp"
						:limit="9" @progress="progress" @success="success" @fail="fail" @select="select" />
					<button v-if="imabtn" style="margin: 10px;" class="btnaaa" type="primary"
						@click="upload00">上传</button>
				</uni-section>
				<button style="margin: 10px;" type="primary" @click="submit('valiForm')">提交</button>
			</uni-forms>
		</view>
		<page-head title="监督服务"></page-head>
	</view>
</template>


<script>
	var _this;
	var vk = uni.vk;

	import uniForms from "@/pages_modules/components/uni-forms/uni-forms";
	import uniFormsItem from "@/pages_modules/components/uni-forms-item/uni-forms-item";
	import uniFilePicker from "@/pages_modules/components/uni-file-picker/uni-file-picker";
	import uniDataPicker from "@/pages_modules/components/uni-data-picker/uni-data-picker";
	import uniDatetimePicker from "@/pages_modules/components/uni-datetime-picker/uni-datetime-picker";
	export default {
		components: {
			uniDatetimePicker,
			uniForms,
			uniFormsItem,
			uniFilePicker,
			uniDataPicker
		},
		data() {
			return {
				imabtn: false,
				imageStyles: {
					border: {
						color: "#2F4056"
					}
				},
				imageValue: [],
				sizeType: ['compressed'],
				userinfo: {},
				dataTree: [],
				dataTreeb: [],
				valiFormData: {
					gdh: '',
					wxid: vk.getVuex('$user.userInfo._id'),
					wxtx: vk.getVuex('$user.userInfo.avatar'),
					wxnc: vk.getVuex('$user.userInfo.nickname'),
					opid: vk.getVuex('$user.userInfo.wx_openid.mp-weixin'),
					fssj: Date.now(),
					xm: '',
					bxms: '',
					bxdh: vk.getVuex('$user.userInfo.mobile'),
					bjbbm: '',
					bjbr: '',
					hobby: [],
					imgs: [],
					gdjd: '1'
				},
				options: {},
				// 多选数据源
				hobbys: [{
					text: '不当言论',
					value: '不当言论',
				}, {
					text: '性骚扰学生',
					value: '性骚扰学生',
				}, {
					text: '体罚学生',
					value: '体罚学生',
				}, {
					text: '消极怠工',
					value: '消极怠工',
				}, {
					text: '徇私舞弊',
					value: '徇私舞弊',
				}, {
					text: '学术不端',
					value: '学术不端',
				}, {
					text: '收受红包礼品礼金',
					value: '收受红包礼品礼金',
				}],
				// 校验规则
				rules: {
					bjbr: {
						rules: [{
							required: true,
							errorMessage: '被举报人'
						}, {
							minLength: 1,
							maxLength: 6,
							errorMessage: '描述长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					bjbbm: {
						rules: [{
							required: true,
							errorMessage: '被举报部门'
						}, {
							minLength: 1,
							maxLength: 8,
							errorMessage: '描述长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					hobby: {
						rules: [{
							required: true,
							errorMessage: '举报类别'
						}]
					},
					bxxm: {
						rules: [{
							required: true,
							errorMessage: '请选择项目'
						}]
					},
					bxms: {
						rules: [{
							required: true,
							errorMessage: '描述'
						}, {
							minLength: 1,
							maxLength: 200,
							errorMessage: '描述长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					fssj: {
						rules: [{
							required: true,
							errorMessage: '请选择发生时间'
						}]
					},
					xm: {
						rules: [{
							required: true,
							errorMessage: '姓名'
						}, {
							minLength: 2,
							maxLength: 6,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
						}]
					},
					bxdh: {
						rules: [{
								required: true,
								errorMessage: '电话'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入正确电话号码'
							}
						]
					}
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			_this = this;
			vk = uni.vk;
			this.userinfo.avatar = vk.getVuex('$user.userInfo.avatar')
			this.userinfo.nickname = vk.getVuex('$user.userInfo.nickname')
			this.userinfo._id = vk.getVuex('$user.userInfo._id')
			this.userinfo.openid = vk.getVuex('$user.userInfo.wx_openid.mp-weixin')

			this.dyxx()
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {

		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 函数
		methods: {
			dyxx() {
				console.log('===')
				uni.requestSubscribeMessage({
					tmplIds: ['21CX0MkjAUc8VMZgi9xlxEiVDLlNZ-Z4KJ_Nfu9ScqA'],
					success(res) {},
					fail(fail) {}
				})
			},
			godd() {
				vk.redirectTo('/pages_modules/fwjdpt/fwjdptlist')
			},
			addxybxgd() {
				_this.valiFormData.gdh = vk.pubfn.timeFormat(new Date(), "yyyyMMddhhmmssS")
				_this.valiFormData.userinfo = _this.userinfo;
				vk.callFunction({
					url: 'client/jp/pub/jdfwpt-obj.addWxryWzListOne',
					title: '请求中...',
					data: {
						..._this.valiFormData
					},
					success: (data) => {
						vk.toast("提交成功", "none", 3000);
						setTimeout(function() {
							vk.redirectTo('/pages_modules/fwjdpt/fwjdptlist')
						}, 2000)
					},
					fail(fail) {
						console.log(fail)
					}
				});
			},
			onchangeb(e) {
				let temp = ''
				for (let s of e.detail.value) {
					temp += s.text
				}
				_this.valiFormData.bxxm = temp
			},
			onchange(e) {
				let temp = ''
				for (let s of e.detail.value) {
					temp += s.text
				}
				_this.valiFormData.bxld = temp

			},
			submit(ref) {
				this.$refs[ref].validate().then(async res => {
					//输入内容
					vk.pubfn.debounce(async () => {
						// 这里写你自己的逻辑
						await _this.addxybxgd();
					}, 5000);

					_this.valiFormData.fssj = Date.now(),
						_this.valiFormData.gdh = '',
						_this.valiFormData.xm = '',
						_this.valiFormData.bjbbm = ''
					_this.valiFormData.bjbr = ''
					_this.valiFormData.bxms = ''
					_this.valiFormData.hobby = []
					_this.valiFormData.imgs = []

				}).catch(err => {
					console.log('err', err);
				})
			},
			// 页面数据初始化函数
			init(options) {
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			async upload00() {
				await this.$refs.files.upload()
			},
			select(e) {
				//console.log(e)
				this.imabtn = true
			},
			progress(e) {
				//console.log(e)
			},
			fail(e) {
				//console.log(e)
			},
			success(e) {
				//uni.showToast({title:"上传完毕", icon:"none"});
				//console.log(e)
				//this.fccc = true
				_this.imageValue.forEach(item => {
					delete item.extname
					delete item.fileType
					delete item.image
					delete item.fileID
					delete item.name
					delete item.size
					delete item.path
					delete item.uuid
					delete item.status
					delete item.cloudPath
				})
				_this.valiFormData.imgs = _this.imageValue
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	.btnaaa {
		margin-bottom: 20px;
	}

	.xzt {
		color: red;
		font-size: 12px;
	}
</style>